<template lang="pug">
.app
  .card-box
    Card
      p(slot="title" style="text-align:center")
        Icon(type="ios-person")
        | 用户登录
      Form(ref="formInline" :model="formInline" :rules="ruleInline")
        FormItem(prop="user")
          Input(type="text" v-model="formInline.user" placeholder="please input username")
            Icon(type="ios-person-outline" slot="prepend")
        FormItem(prop="password")
          Input(type="password" v-model="formInline.password" placeholder="please input password")
            Icon(type="ios-lock-outline" slot="prepend")
        FormItem(style="text-align:center")
          Button(type="success" @click="handleSubmit('formInline')" icon="md-log-in") 登录
          Button(type="info" @click="reset('formInline')" icon="md-refresh" style="margin-left:10px") 重置    
  div(ref="lineBar" style="width:800px;height:400px")         
      
</template>
<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        password: ""
      },
      ruleInline: {
        user: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            type: "string",
            min: 3,
            message: "密码不能小于3位数",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("调用登录接口");
          this.login();
        } else {
          this.$Message.error("用户名或不能为空");
        }
      });
    },
    reset(formInline) {
      this.$refs[formInline].resetFields();
    },
    async login() {
      const { user, password } = this.formInline;
      console.log(user + ":" + password);
      this.$login.login(this.formInline).then(r => {
        console.log("ff", r);
      });
    },
    drawChart() {
      let homeBar = this.$refs.lineBar;
      let option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["周一", "Tue", "dd", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 50, 390, 330, 220]
          }
        ]
      };
      this.$initCharts(homeBar, option);
    }
  }
};
</script>

<style lang="stylus" scoped>
@import './login';
</style>

